<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap editor 方法 - itxst.com</title>
    <meta name="keywords" content="tiptap editor 方法" />
    <meta name="description" content="tiptap 编辑器的 editor 方法的可以返回任何内容，请勿与commands命令混淆，commands 用于更改编辑器的状态（内容、选择内容等），并且仅返回true/false。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/methods.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap editor 方法</h1>
               
               <p class="p"><strong>tiptap</strong>编辑器的 <strong>editor</strong> 方法的可以返回任何内容，请勿与<strong>commands</strong>命令混淆，<strong>commands</strong> 用于更改编辑器的状态（内容、选择内容等），并且仅返回<strong>true/false</strong>。</p><h2>can</h2><p>检查命令或命令链路是否可以执行 ，不会真实执行这些命令，比如是否可以启用/禁用或显示/隐藏按钮等</p><pre class="brush:js;toolbar:false"><code class="language-javascript">//如果可以执行 undo 命令返回 true
editor.can().undo()</code></pre><h2>chain</h2><p>命令链路，将一个命令或多个命令串联起来执行</p><pre class="brush:js;toolbar:false"><code class="language-javascript">//一次执行两个命令
editor.chain().toggleBold().focus().run()</code></pre><h2>destroy</h2><p>销毁编辑器实例并注销所有事件</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// www.itxst.com
editor.destroy()</code></pre><h2>getHTML</h2><p>获取编辑器内容，返回 html 字符串</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 返回 html 字符串
let cont = editor.getHTML()</code></pre><h2>getJSON</h2><p>获取编辑器内容，返回 json 字符串</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 返回 json 字符串
let cont = editor.getJSON()</code></pre><h2>getText</h2><p>获取编辑器内容，返回纯文本</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// Give me plain text!
editor.getText()
// 两个节点 nodes 之间插入 两个换行符
editor.getText({ blockSeparator: "\n\n" })</code></pre><h2>getAttributes</h2><p>Get attributes of the currently selected node or mark.<br/>
 &nbsp;获取选中的节点或标记的属性

参数string | NodeType | MarkType</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 返回 json 字符串
editor.getAttributes('link').href</code></pre><h2>isActive</h2><p>Returns if the currently selected node or mark is active.<br/>
 &nbsp;返回选中节点或标记的状态</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// Check if it’s a heading 
editor.isActive('heading')
// Check if it’s a heading with a specific attribute value
editor.isActive('heading', { level: 2 })
// Check if it has a specific attribute value, doesn’t care what node/mark it is
editor.isActive({ textAlign: 'justify' })</code></pre><h2>registerPlugin</h2><p>注册插件ProseMirror</p><div class="xst-table"><table interlaced="enabled"><tbody><tr class="ue-table-interlace-color-single firstRow"><th style="border-color: rgb(221, 221, 221); word-break: break-all;width:160px">参数<br/></th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">类型</th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">说明</th></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">plugin</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">Plugin</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">ProseMirror 插件</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">handlePlugins?</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">(newPlugin: Plugin, plugins: Plugin[]) =&gt; Plugin[]</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">Control how to merge the plugin into the existing plugins</td></tr></tbody></table></div><h2>setOptions</h2><p>更新编辑器的配置</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// 添加 class 样式到编辑器实例
editor.setOptions({
  editorProps: {
    attributes: {
      class: 'my-custom-class',
    },
  },
})</code></pre><h2>setEditable</h2><p>设置编辑器的状态</p><div class="xst-table"><table interlaced="enabled"><tbody><tr class="ue-table-interlace-color-single firstRow"><th style="border-color: rgb(221, 221, 221); word-break: break-all;width:160px">参数<br/></th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">类型</th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">说明</th></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">editable</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">boolean</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">true 可编辑、false 只读</td></tr><tr class="ue-table-interlace-color-single"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">emitUpdate</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">boolean</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">是否触发&nbsp;onUpdate 事件，默认 true</td></tr></tbody></table></div><pre class="brush:js;toolbar:false"><code class="language-javascript">// 设置编辑器只读
editor.setEditable(false)</code></pre><h2>unregisterPlugin</h2><p>注销插件</p><div class="xst-table"><table interlaced="enabled"><tbody><tr class="ue-table-interlace-color-single firstRow"><th style="border-color: rgb(221, 221, 221); word-break: break-all;width:160px">参数<br/></th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">类型</th><th style="border-color: rgb(221, 221, 221); word-break: break-all;">说明</th></tr><tr class="ue-table-interlace-color-double"><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">nameOrPluginKey</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">string | PluginKey</td><td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">插件名</td></tr></tbody></table></div><h2>在线试一试</h2><p><a class="btntry" href="//debug.itxst.com/js/m2avey3e" target="_blank" title="在线试一试">在线试一试</a></p>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1    doc-2 " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
